<template>
	<view class="content">
		<image src="@/assets/images/list_head.png" class="w-full h-[200px]"></image>
		<view class="nav-bar">
			<view class="nav-back" @click="pageBack()">
				<i class="icon icon_back"></i>
				<text>返回</text>
			</view>
			<view class="nav-title" @click="pageBack()">
				<text class="text-[#D9CEBF]">{{data.type === 'book' ? '书画':'印章'}}</text>
				<i class="icon icon_fanhui"></i>
				<text class="text-white flex-1">{{data.info.name}}</text>
			</view>
		</view>
		<view class="flex-1 overflow-hidden">
			<scroll-view class="w-full h-full" scroll-y :scroll-top="scrollTop" @scroll="scroll" scroll-with-animation>
				<carousel :list="imgList" :type="data.type" :current="swiperCurrent" :heightNumber="1000"
					class="pt-[50px] py-[80px]" @change="changeSwiper" @swiperItemClick="showPreViewImage"></carousel>
				<view class="leading-[64px] text-[48px] font-bold text-center my-[50px] px-[30px]">{{data.info.name}}</view>
				<view class="text-container">
					<view class="text-top" @click="scrollTextTop"></view>
					<template v-if="data.info.content.length">
						<view v-for="(item,index) in data.info.content" :key="index" :class="{'indent-16':!item.startsWith('钤印')&&!item.startsWith('鉴藏')&&!item.startsWith('释文')&&!item.startsWith('现为')&&!item.startsWith('解说')&&!item.startsWith('材质')&&!item.startsWith('边款')&&!item.startsWith('尺寸')}">{{item}}</view>
					</template>
					<view class="text-[#999999]" v-else>暂无简介</view>
				</view>
				<view class="h-[50px]"></view>
			</scroll-view>
		</view>
		<template v-if="data.type !== 'book'">
			<dragButton @updateItemLocal="updateItemLocal" :bottomPx="700" @clickBtn="clickBtn">
				<view class="three-d-btn" :class="[localType === -1 ? 'is-left' : '']" >
					<template v-if="localType !== -1">
						<image src="@/assets/images/a-3Dmoxing.png" /><text>三维</text>
					</template>
					<template v-else>
						<text>三维</text>
						<image src="@/assets/images/a-3Dmoxing.png" />
					</template>
				</view>
			</dragButton>
		</template>
		<!-- <previewImage  :imgs="imgList" :type="data.type"></previewImage> -->
		 <uon-preview  :list="imgList" :img-index="curImgIndex" ref="previewImageRef" keyName="src">
		      
		 </uon-preview>
		<backSimple />
	</view>
</template>

<script setup>
	import {
		computed,
		ref
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import carousel from '@/components/vear-carousel/vear-carousel.vue'
	import previewImage from '@/components/previewImage/previewImage.vue';
	import dragButton from '@/components/drag-button/drag-button.vue'
	import backSimple from '@/components/back-simple/back-simple.vue';
	import {getLocalDetail} from '@/hooks/getLocalDetail'
	const {data} = getLocalDetail()

	const imgList = computed(() => {
		return data.info.img.map((v, index) => {
			return {
				src: v,
				id: index
			}
		})
	})
	const previewImageRef = ref(null)

	onLoad(() => {
		const fingerTipDetail = localStorage.getItem('fingerTipDetail')
		if (fingerTipDetail) {
			Object.assign(data, JSON.parse(fingerTipDetail))
		}
	})

	function pageBack() {
		uni.navigateBack()
	}
	const swiperCurrent = ref(0)

	function changeSwiper(index) {
		swiperCurrent.value = index
	}
	const scrollTop = ref(0)

	function scrollTextTop() {
		scrollTop.value = 1133
	}

	function scroll(e) {
		scrollTop.value = e.detail.scrollTop
	}

    const curImgIndex = ref(0)
	function showPreViewImage(index) {
		curImgIndex.value = index
		previewImageRef.value.handler(index)
	}
	const localType = ref(1)

	function updateItemLocal(changeType) {
		localType.value = changeType
	}
	
	function clickBtn() {
		uni.navigateTo({
			url:'/pages/webview/webview'
		})
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
		background: url('@/assets/images/list-bg.png') no-repeat;
		background-size: 100% 100%;

		.three-d-btn {
			width: 180px;
			height: 80px;
			background: #A25525;
			border-radius: 100px 0px 0px 100px;
			display: flex;
			align-items: center;
			justify-content: center;
			
			&.is-left {
				border-radius:  0px 100px 100px 0px;
				text {
					margin-left: 0;
					margin-right: 10px;
				}
			}


			image {
				width: 40px;
				height: 46px;
			}

			text {
				margin-left: 10px;
				font-size: 32px;
				color: #fff;
			}
		}

		.nav-bar {
			height: 100px;
			display: flex;
			justify-content: space-between;

			.nav-back {
				padding-left: 42px;
				width: 260px;
				height: 100%;
				background: url('@/assets/images/detail_back.png') no-repeat;
				background-size: 100% 100%;
				display: flex;
				align-items: center;

				.icon.icon_back {
					width: 64px;
					height: 64px;
					background: url('@/assets/images/back.png') no-repeat;
					background-size: 100% 100%;
				}

				text {
					margin-left: 12px;
					font-size: 32px;
					color: #fff;
				}
			}

			.nav-title {
				flex: 1;
				background: url('@/assets/images/back_title.png');
				background-size: 100% 100%;
				font-size: 32px;
				display: flex;
				align-items: center;
				padding-left: 60px;

				.icon_fanhui {
					margin: 0 20px;
					width: 26px;
					height: 30px;
					background: url('@/assets/images/fanhui.png') no-repeat;
					background-size: 100% 100%;
				}
			}
		}
	}

	.text-container {
		@apply bg-white mx-[50px] rounded-[12px] leading-[62px] text-[32px] p-[40px] text-[#000000] relative;
		

		.text-top {
			margin: 0 auto 40px;
			width: 150px;
			height: 12px;
			border-radius: 12px;
			background: rgb(211, 211, 211);
		}
	}
</style>